<!-- 页面主要内容 -->
<template>
  <div class="home">
    <el-container class="home-container">

      <!-- header -->
      <el-header>
        hidden-lg-only
      </el-header>

      <el-container class="home-container">

      </el-container>

    </el-container>

  </div>
</template>

<script>
    export default {
        //组件
        components: {},
        //属性
        data() {
            return {
                logo_url: require("@/assets/img/logo.png"),

                form: {
                    username: "",
                    password: "",
                },

                rules: {
                    username: [{
                        require: true,
                        message: "请输入管理员账号",
                        trigger: "blur"
                    }],

                    password: [{
                        require: true,
                        message: "请输入管理圆密码",
                        trigger: "blur"
                    }],
                }
            };
        },
        //created:在模板渲染成- html·页面之前调用，通常初始化某些属性值，然后再渲染成视图。
        created() {},
        //在模板渲染成-html-页面之后调用，通常是初始化页面完成后，再对·html·的 dom·节点进行一些需要的操作
        mounted() {},
        //·页面调用方法
        methods: {
            //登录校验 
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loginLoading = true;
                        this.$axios
                            .post("/docter/login", this.form)
                            .then((res) => {
                                if (res.data.success) {
                                    sessionStorage.setItem("user", JSON.stringify(res.data.data.user));
                                    sessionStorage.setItem("token", res.data.token);
                                    this.$router.push("/home");
                                } else {
                                    this.$message.error(res.data.msg);
                                    this.loginLoading = false;
                                }
                            })
                            .catch((err) => {
                                this.$message.error("服务器连接失败，请稍后重试......");
                                this.loginLoading = false;
                            });
                        this.$router.push("/home");
                    } else {
                        return false;
                    }
                });
            },
        },
    };
</script>

<style scoped>
    .login {
        width: 100%;
        height: 100%;
        background-image: url("../assets/img/bg.jpg");
        position: absolute;
        background-size: 100% 100%;
    }
    
    .login_card {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 20%;
        min-width: 300px;
        height: 500px;
        min-height: 500px;
        border-radius: 30px;
        text-align: center;
    }
    
    .logo_image {
        width: 50px;
        height: 50px;
        margin-top: 40px;
    }
    
    .login_title {
        font-size: 25px;
        font-weight: bold;
    }
    
    .login_desc {
        letter-spacing: 2px;
        color: #999a9a;
    }
    
    .footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 20px;
        text-align: center;
        color: rgb(183, 181, 181);
    }
    
    .wechat_logo:hover,
    .home_logo:hover {
        border-radius: 50%;
        box-shadow: 0 3px 15px 3px rgba(237, 229, 229, 0.5);
    }
    
    .wechat_logo:hover+.offical_img {
        display: block;
    }
    
    .home_logo:hover+.juejin_img {
        display: block;
    }
    
    .footer:hover {
        color: white;
    }
    /*按钮样式*/
    
    .login-button {
        padding: 10px 20px;
        font-size: 16px;
        border: none;
        background-color: #f4f4f4;
        color: #333;
        text-align: center;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    
    .login-button:hover {
        background-color: rgb(85, 238, 238);
    }
    
    .login-button:active {
        background-color: #ccc;
    }
</style>